<template>
  <div class="parameter-list">
    <div class="parameter-item">
      <div class="header">
        <strong>参数{{index+1}}</strong>
        <p>
          <el-button @click="addSpecification(index)" type="search">添加参数</el-button>
          <el-button @click="delSpecification(index)" :disabled="!showActions">删除参数</el-button>
          <span class="iconbtn">
            <el-button class="btn" @click="ramkUp(index)" :disabled="index === 0 || !showActions"><i class="iconfont icon-rank_up"></i></el-button>
            <el-button class="btn" @click="ramkDown(index)" :disabled="index === data.length - 1 || !showActions"><i class="iconfont icon-rank_down"></i></el-button>
          </span>
        </p>
      </div>
    </div>
    <el-form-item 
      label="一级标题："
      :prop="pindex + '.data.' + index + '.0' + '.first_title'"
      :rules="[
        { required: true, message: '字段一级标题为必填项', trigger: 'blur' }
      ]"
      >
      <el-input v-model="firstTitle" clearable></el-input>
    </el-form-item>
    <template v-for="(val, i) in item">
      <Item :key="val.id + i" :item="val" :index="i" :proptext="propText" :data="item" @update="handleUpdateItem" @add="handleAdd" @remove="handleRemove"/>
    </template>
  </div>
</template>

<script>
import Item from './item'
export default {
  components: {
    Item
  },
  props: {
    pindex: {
      type: [Number, String],
      required: true
    },
    index: {
      type: [Number, String],
      required: true
    },
    item: {
      type: Array,
      default() {
        return []
      }
    },
    data: {
      type: Array,
      default() {
        return []
      }
    }
  },
  computed: {
    propText() {
      return this.pindex + '.data.' + this.index
    },
    showActions() {
      return this.data && this.data.length > 1
    },
    firstTitle: {
      get() {
        return this.item.length ? this.item[0].first_title : ''
      },
      set(val) {
        if(val && this.data.some(item => item[0].first_title === val)) {
          this.$message.error(`一级标题${val}存在相同数据！`)
        } else {
          this.$emit('update', {index: this.index, subIndex: 'all', data: {first_title: val}})
        }
      }
    }
  },
  data() {
    return {
      formData: {
        first_title: '',
      }
    }
  },
  methods: {
    handleUpdateItem(data) {
      this.$emit('update', {index: this.index, subIndex: data.index, data: data.data})
    },
    addSpecification() {
      this.$emit('add-item', this.index)
    },
    delSpecification() {
      this.$emit('remove-item', this.index)
    },
    ramkUp() {
      this.$emit('move', [this.index, this.index - 1])
    },
    ramkDown() {
      this.$emit('move', [this.index, this.index + 1])
    },
    handleAdd(index) {
      this.$emit('add-item-content', [this.index, index])
    },
    handleRemove(index) {
      this.$emit('remove-item-content', [this.index, index])
    }
  }
}
</script>

<style lang="scss">
  .parameter-list {
    padding: 0 24px 10px;
  }
  .parameter-list .el-form-item__content {
    display: inline-block;
    width: calc(100% - 121px);
  }
  .parameter-list .el-button.is-disabled {
    cursor: not-allowed;
    background-color: #FAFAFA;
    border-color: #D5D5D5;
    .removeicon {
      color: #dac1bf;
    }
    i {
      color: #EAEAEA;
    }
  }
  .parameter-item {
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      .iconbtn .btn {
        padding: 0;
        width: 32px;
        height: 32px;
        // border: 1px solid #ccc;
        border-radius: 4px;
        &:disabled {
          pointer-events: none;
        }
        &:hover {
          color: #6c7e59;
          border-color: #6c7e59;
          i {
            color: #6c7e59;
          }
        }
        

        &:first-child {
          margin-left: 10px;
        }
        &:last-child {
          margin-left: 5px;
        }
      }
    }
  }
</style>